<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    {load href='/static/index/css/bootstrap.min.css'}
    {load href='/static/index/reset.css'}
    {css href="/static/index/css/toastr.min.css"}
</head>
<body>

<div class="container">
    <div class="col-md-12 bg-warning">
        <h1>{$title}</h1>
        <a href="{:url('admin/user/index')}" class="btn btn-default">用户列表首页</a>
        <button type="button" class="btn btn-default show-btn" data-toggle="modal" data-target="#myModal">新增用户</button>
    </div>
    <div class="clearfix"></div>
    {block name="main"}
    <div class="col-md-12 mt30">
        <!--左边列表部分-->
        <div class="col-md-6">
            <table class="table table-hover bg-warning">
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th class="text-center">操作</th>
                </tr>
                {volist name='list' id='v' mod='2'}
                    {eq name='mod' value='0'}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td class="col-md-6">
                            <a href="{:url('admin/user/show',['id'=>$v['id']])}" class="btn btn-sm  btn-warning">查看(页)</a>
                            <button type="button" class="btn btn-success btn-sm show-btn" data-id="{$v['id']}" data-toggle="modal" data-target="#myModal2">查看(框)</button>
                            <button type="button" class="btn btn-info btn-sm edit-btn" data-id="{$v['id']}"
                                    data-toggle="modal" data-target="#myModal">编辑
                            </button>
                            <button class="btn btn-sm btn-danger del-btn" data-id="{$v['id']}">删除</button>
                        </td>
                    </tr>
                    {/eq}
                {/volist}
            </table>
        </div>
        <!--右边列表部分-->
        <div class="col-md-6">
            <table class="table table-hover bg-warning">
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th class="text-center">操作</th>
                </tr>
                {volist name='list' id='v' mod='2'}
                {eq name='mod' value='1'}
                <tr>
                    <td>{$v['id']}</td>
                    <td>{$v['name']}</td>
                    <td class="col-md-6">
                        <a href="{:url('admin/user/show',['id'=>$v['id']])}" class="btn btn-sm  btn-warning">查看(页)</a>
                        <button type="button" class="btn btn-success btn-sm show-btn" data-id="{$v['id']}" data-toggle="modal" data-target="#myModal2">查看(框)</button>
                        <button type="button" class="btn btn-info btn-sm edit-btn" data-id="{$v['id']}" data-toggle="modal" data-target="#myModal">编辑</button>
                        <button class="btn btn-sm btn-danger del-btn" data-id="{$v['id']}">删除</button>
                    </td>
                </tr>
                {/eq}
                {/volist}
            </table>
        </div>
    </div>
</div>


<!-- Modal 新增用户模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">用户[ <u></u> ] 的详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">

                    </div>
                    <form action="{:url('admin/user/save')}" method="post" class="mt20 h3 text-center">
                        name:
                        <input type="text" name="name" placeholder="请输入用户名"><br><br>
                        pass:
                        <input type="password" name="pass" placeholder="密码"><br><br>
                        sex:
                        <input type="radio" name="sex" value="0">女
                        <input type="radio" name="sex" value="1" checked>男
                        <input type="radio" name="sex" value="2">保密<br><br>
                        age:
                        <input type="text" name="age"><br><br>
                        province:
                        <select name="province">
                            <option value="江苏">江苏</option>
                            <option value="上海">上海</option>
                            <option value="新疆">新疆</option>
                            <option value="浙江">浙江</option>
                            <option value="北京">北京</option>
                            <option value="深圳">深圳</option>
                            <option value="纽约">纽约</option>
                        </select>
                        <input type="hidden" name="vcode" value="1234">
                        <input type="hidden" name="hehe" value="dsadas">
                        <input type="hidden" name="haha" value="wwwww">
                        <br><br>
                        <input type="submit" value="确认添加">
                    </form>
                    <div class="col-md-8">
                        <h3></h3>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal2 用户信息模态框-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">用户[ <u></u> ] 的详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                    </div>
                    <div class="col-md-8">
                        <h3></h3>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{/block}

{js href='/static/index/js/jquery.min.js'}
{js href="/static/index/js/bootstrap.min.js"}
{js href="/static/index/js/toastr.min.js"}

{block name="js"}
<script>
    //删除用户
    $('.del-btn').click(function () {
        //接收id
        var id = $(this).attr('data-id');
        if (confirm('确定要删除改用户吗')) {
            var obj = $(this).parents('tr');
            //ajax去操作数据库
            $.ajax({
                url: '/user/' + id,
                type: 'delete',
                datatype: 'json',
                success: function (data) {
                    if(data.status){
                        //移除该tr行
                        obj.remove();
                        toastr.success(data.info);
                    }else{
                        toastr.error(data.info,'warning');
                    }
                },
                error: function () {
                    toastr.error('操作失败');
                }
            });
        }
    });

    //查询用户信息
    // 检测查看用户信息
    $('.show-btn').click(function(){
        var id = $(this).attr('data-id');
        //执行ajax查询
        $.ajax({
            url : '/user/'+id,
            type : 'get',
            datatype : 'json',
            success: function (data) {
                if(data.status){
                    $('#myModal2 .modal-title').html(data.name);
                    var msg = '<li>'+data.name+'</li>';
                    msg += '<li>'+data.age+'</li>';
                    msg += '<li>'+data.sex+'</li>';
                    msg += '<li>'+data.tel+'</li>';
                    msg += '<li>'+data.province+'</li>';
                    $('#myModal2 .modal-body h3').html(msg);
                }else{
                    toastr.error(data.info,'warning');
                }
            },
            error: function () {
                toastr.error('操作失败');
            }
        });
    });
</script>
{/block}
</body>
</html>